<template>
  <div class="box">
    <div>
      <input
          type="text"
          v-model="query"
          @keydown.enter="search(query)"
          placeholder="请输入查询关键字"
      />
    </div>
    <div class="wordCloud" ref="wordCloud">
      <svg
          :width="width"
          :height="height"
          v-on:mousemove="mouseMove($event)"
          v-on:mouseout="mouseOut()"
      >
        <a
            v-for="word in wordList"
            @click="nodeClick(word.text)"
        >
          <text
              :x="word.x"
              :y="word.y"
              :font-size="22 * (600 / (600 - word.z))"
              :fill-opacity="(400 + word.z) / 600"
              :fill="word.color"
          >
            {{ word.text }}
          </text>
        </a>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  name: "WorldCloud",
  data() {
    return {
      width: 600,
      height: 600,
      wordsNum: 30,
      R: 200, //半径
      speedX: Math.PI / 360,
      speedY: Math.PI / 360,
      wordList: [],
      query: "",
    };
  },
  computed: {
    CX() {
      return this.width / 2;
    },
    CY() {
      return this.height / 2;
    },
  },
  created() {
    let wordList = [];
    let words = [
      "草莓",
      // "根腐病",
      "火龙果",
      "苹果",
      "啶虫脒",
      "水稻",
      // "霜霉病",
      "噻嗪酮",
      "青花菜",
      // "蚜虫",
      "玉米",
      "多菌灵",
      "吡虫啉",
      // "白粉病",
      // "红蜘蛛",
      // "毒死蜱",
      "小麦",
      "阿维菌素",
      "葡萄",
      "阿维菌素",
      "螺虫乙酯",
      "噻嗪酮",
      // "蚜虫",
      "玉米",
      "多菌灵",
      "黄瓜",
      "甲基硫菌灵",
      "苦瓜",
      // "白粉病",
      "草莓",
      // "根腐病",
      "苹果",
      "水稻",
      // "霜霉病",
      "克百威",
      "生姜",
      "己唑醇",
      "西红柿",
      // "病毒病",
      "土豆",
      // "蝗虫",
    ];
    let urls = [];
    for (let i = 0; i < this.wordsNum; i++) {
      let word = {};
      let k = -1 + (2 * (i + 1) - 1) / this.wordsNum;
      let a = Math.acos(k);
      let b = a * Math.sqrt(this.wordsNum * Math.PI);
      word.text = words[i];
      // word.url = urls[i];
      word.url = "/";
      word.x = this.CX + this.R * Math.sin(a) * Math.cos(b); //根据标签角度求出标签的x,y,z坐标
      word.y = this.CY + this.R * Math.sin(a) * Math.sin(b);
      word.z = this.R * Math.cos(a);
      let random1 = Math.floor(Math.random() * (255 + 1));
      let random2 = Math.floor(Math.random() * (255 + 1));
      let random3 = Math.floor(Math.random() * (255 + 1));
      word.color = "rgb(" + random1 + "," + random2 + "," + random3 + ")";
      wordList.push(word);
    }
    this.wordList = wordList;
  },
  methods: {
    rotateX(angleX) {
      var cos = Math.cos(angleX);
      var sin = Math.sin(angleX);
      for (let word of this.wordList) {
        var y1 = (word.y - this.CY) * cos - word.z * sin + this.CY;
        var z1 = word.z * cos + (word.y - this.CY) * sin;
        word.y = y1;
        word.z = z1;
      }
    },
    rotateY(angleY) {
      var cos = Math.cos(angleY);
      var sin = Math.sin(angleY);
      for (let word of this.wordList) {
        var x1 = (word.x - this.CX) * cos - word.z * sin + this.CX;
        var z1 = word.z * cos + (word.x - this.CX) * sin;
        word.x = x1;
        word.z = z1;
      }
    },
    mouseMove(event) {
      var x = this.$refs.wordCloud.offsetWidth / 2 - event.clientX;
      var y =
          this.$refs.wordCloud.offsetHeight / 2 +
          this.$refs.wordCloud.offsetTop -
          event.clientY;
      if (Math.abs(x) < 5) {
        this.speedY = 0;
      } else {
        this.speedY =
            x > 0
                ? Math.max(-this.R * 0.00002, x * 0.00005)
                : Math.min(this.R * 0.00002, x * 0.00005);
      }
      if (Math.abs(y) < 5) {
        this.speedX = 0;
      } else {
        this.speedX =
            y > 0
                ? Math.max(-this.R * 0.00002, y * 0.00005)
                : Math.min(this.R * 0.00002, y * 0.00005);
      }
    },
    mouseOut() {
      this.speedX = Math.PI / 360;
      this.speedY = Math.PI / 360;
    },
    nodeClick(tag) {
      this.$router.push({path: "/KG", query: {query: tag}});
    },
    search(query) {
      this.$router.push({path: "/KG", query: {query: query}});
    },
  },
  mounted() {
    setInterval(() => {
      this.rotateX(this.speedX);
      this.rotateY(this.speedY);
    }, 20);
  },
};
</script>

<style scoped>
.box {
  background: ghostwhite url("../assets/bg.svg") no-repeat fixed center;
  text-align: center;
}

.box input {
  margin: 30px;
  height: 30px;
  width: 500px;
  padding: 6px 10px;
  line-height: 1.5;
  color: #555;
  border: 2px solid #555;
  border-radius: 24px;
  font-size: 16px;
  text-align: center;
}

.wordCloud svg {
  display: block;
  margin: auto;
}

.wordCloud a:hover text {
  stroke: black;
}
</style>